<script lang="ts" setup>
import SelectItem from './SelectItem.vue'
import type {SubCategoryList} from '@/typings/api'

const {subCategory} = defineProps<{
    show: boolean
    subCategory: SubCategoryList[]
}>()

defineEmits<{
    (e: 'update:show', value: boolean): void
}>()

const {categoryState} = $(useCategory())

const active = computed(() => {
    return !categoryState?.categoryId || categoryState?.categoryId === -1
})
</script>

<template>
    <view v-show="show">
        <view class="select">
            <SelectItem :id="-1" title="全部" :active="active" @click="$emit('update:show', false)"/>
            <SelectItem
                    v-for="item in subCategory"
                    :id="item?.id"
                    :key="item.id"
                    :title="item?.name || ''"
                    :active="categoryState?.categoryId === item?.id"
                    @click="$emit('update:show', false)"
            />
        </view>
        <!-- 阴影 -->
        <view class="shade" @click="$emit('update:show', false)"/>
    </view>
</template>

<style lang="scss" scoped>
.select {
    left: 0;
    z-index: 3;
    padding: 0 35rpx;
    top: 90rpx;
    position: absolute;
    background-color: white;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    padding-top: 12rpx;
    width: 100%;
    box-sizing: border-box;
}

.shade {
    left: 0;
    z-index: 2;
    top: 90rpx;
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba($color: #555555, $alpha: 0.25);

    transition: opacity 0.3s;
}
</style>
